<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模块管理页面</title>
    <link rel="stylesheet" href="../../res/layui/css/layui.css"/>
    <script type="text/javascript" src="../../res/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../../res/layui/layui.js"></script>
    <script type="text/javascript" src="../../res/js/sweetalert2.js"></script>
</head>
<style>
    .layui-table-cell {
        height: 45px;
        line-height: 45px;
    }
</style>

<body>


<table id="demo" lay-filter="test"></table>

<script type="text/html" id="checkboxTpl">
    <input type="checkbox" name="moduleResult" value="{{d.moduleId}}" lay-skin="switch" lay-text="有效|无效" lay-filter="lockDemo" {{ d.moduleId== 2 ? 'disabled' : '' }} lay-filter="lockDemo" {{ d.moduleResult == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="demoTable">
        <div class="layui-inline">
            <input class="layui-input" name="moduleName" id="moduleName" placeholder="模块名称......" autocomplete="off">
        </div>
        <input type="button" id="seachTable" class="layui-btn layui-btn-normal" lay-event="seachTable" value="搜索"/>
        <button class="layui-btn layui-btn-primary" lay-event="addBtn">新增</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    {{# if(d.moduleIds!=1) { }}
    <button class="layui-btn" lay-event="edit">修改</button>
    {{# } else{}}
    <button class="layui-btn layui-btn-disabled">修改</button>
    {{# } }}
</script>
<script>
    var table2 = null;
    layui.use('table', function () {
        var table = layui.table, form = layui.form;
        //第一个实例
        table2 = table.render({
            elem: '#demo',
            height: 540,
            url: '../../model/selectAll.form', //数据接口
            toolbar: '#toolbarDemo',
            page: true, //开启分页
            cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {field: 'moduleId', width: 60, title: 'ID', sort: true},
                {field: 'moduleNames', minWidth: 145, title: '上级模块名称'},
                {field: 'moduleName', minWidth: 80, title: '模块名称', sort: true},
                {field: 'moduleUrl', minWidth: 105, title: '模块地址'},
                {field: 'moduleResult', title: '是否有效', minWidth: 72, templet: '#checkboxTpl', unresize: true},
                {field: 'moduleSort', title: '排序', sort: true, minWidth: 68},
                {field: 'moduleRemark', title: '备注', sort: true, minWidth: 94},
                {fixed: 'right', title: '操作', minWidth: 170, width: 170, toolbar: '#barDemo'}
            ]]
        });




        //监听头部工具栏事件
        table.on('toolbar(test)',function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'seachTable'://搜索
                    //执行重载
                    //带条件查询
                    table2.reload({
                        where: {
                            moduleName: $("#moduleName").val()
                        },
                        //第一页开始
                        page: {
                            curr: 1
                        }
                    });
                    break;
                case 'addBtn'://增加
                    //iframe层
                    layer.open({
                        type : 2,
                        title : '增加页面',//标题
                        shadeClose : true,
                        shade : 0.3,//背景阴影
                        area : [ '50%','60%' ],//大小
                        content : 'saveOrUpdate.html', //iframe的url
                        end : function() {
                            table2.reload();//渲染
                        }
                    });
                    break;
            };
        });

        //监听操作
        table.on('tool(test)',function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent === 'edit') { //编辑
                var data = obj.data;//行数据
                //iframe层
                layer.open({
                    type : 2,
                    title : '修改页面',//标题
                    shadeClose : true,
                    shade : 0.3,//背景阴影
                    area : [ '50%','60%' ],//大小
                    content : 'saveOrUpdate.html?id='+ data.moduleId, //iframew的url
                    end : function() {
                        table2.reload();
                    }
                });
            }
        });

        //监听效果操作
        form.on('switch(lockDemo)', function(obj){
            Swal.fire({
                title: '是否修改此状态？',
                text: "是否要修改这条数据的状态吗？",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '修改',
                cancelButtonText: '取消'
            }).then((result) => {
            if (result.value) {
                var data = {moduleId:this.value,moduleResult: 0};
                if (obj.elem.checked) {
                    data.moduleResult = 1;
                }
                var url = "../../model/result.form";
                $.post(url, data, function (objs) {
                    if (objs == 1) {
                        Swal.fire(
                            '成功！',
                            '修改成功!',
                            'success'
                        )
                    } else {
                        Swal.fire({
                            type: 'error',
                            title: '错误！',
                            text: '修改失败'
                        })
                    }

                }, "json");
            }else{
                $(".layui-laypage-btn").click()
            }
        })

        });

    });
</script>

</body>
</html>